@extends('layouts.back_stage')
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
@section('content')
    <style>
        #app{
            margin-top:20px;
        }
        body{
            background-color: #f0f3f4;
        }
        .element-white{
            background-color: white;
            margin-bottom:20px;
            padding-top:20px;
            height:auto!important;
            overflow: hidden;
        }
        .table-view-image{
            max-width:200px;
            max-height:50px;
        }
        .choose_image_list{
            cursor: pointer;
            max-width:100%;
            max-height:100%;
        }
    </style>
    <div id="app">
        <el-container>
            <el-header class="element-white">
                <el-row>
                    <el-tabs v-model="editableTabsValue" type="border-card" @edit="handleTabsEdit" >
                        <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.name" :name="item.name">
                            <el-row>
                                类别名字：<el-input v-model="item.name" style="width:200px;margin-left:10px;"></el-input>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    总数:@{{ item.cate_sum }}
                                </el-col>
                                <el-col :span="6" :offset="6" style="margin-top:10px;margin-bottom:10px;">
                                    <el-button type="success" @click="addNewLine(item)">新增行</el-button>
                                    <el-button type="success" @click="goRankList(item)">查看</el-button>
                                </el-col>
                            </el-row>
                            <el-table :data="item.data">
                                <el-table-column prop="serial" label="序号">

                                </el-table-column>
                                <el-table-column prop="girard" label="款号">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.girard"  placeholder="请输入内容"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="img_path" label="图片">
                                    <template slot-scope="scope">
                                        <img class="table-view-image" :src="scope.row.img_path" :alt="scope.row.img_path">
                                    </template>
                                </el-table-column>
                                <el-table-column prop="nums"  label="数量">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.nums"  placeholder="请填写数量" @change="checkSum(item)">
                                            <template slot="append">件</template>
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="replaceRowImg(scope,item)">选择图片</el-button>
                                        <el-button type="text" size="small" @click="deleteRow(scope.$index,item)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-row>
                                <el-col :span="6" :offset="18" style="margin-top: 20px;">
                                    <el-button type="warning" @click="successCheck(item)">完成</el-button>
                                    <el-button type="danger" @click="resetCheck()">重置</el-button>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
            </el-header>
            <el-dialog title="选择图片" :visible.sync="chooseImage">
                <el-row>
                    <el-col :span="4" :offset="2" v-for="item in girard_image_list">
                        <img class="choose_image_list" :src="item.src" alt="" @click="replaceCheck(item.src)">
                    </el-col>
                </el-row>
                
            </el-dialog>
        </el-container>
    </div>
<script>
    var cdn_name = "{{ env('CDN_DOMAIN_NAME') }}";
    var app = new Vue({
        el:'#app',
        data(){
            return {
                editableTabsValue: '1',
                editableTabs: [
                ],
                tabIndex: 1,
                chooseImage:false,
                girard_image_list:[
                ],
                setImgNeed:[0,0]
            }
        },
        mounted(){
            let self = this;
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                url: '/ranking/get-ranking-cate',
                type: 'get',
                data: {},
                dataType: 'json',
                success: function(res) {
                    if(res.result.success){
                        let data = new Array();
                        let tabIndex = 1;
                        for(let value of res.content){
                            data.push({"name":value.name,"id":value.id,data:[{"serial":1,girard:"",img_path:"请在操作选择图片",nums:""}],cate_sum:"0"});
                            tabIndex++;
                        }
                        self.editableTabsValue = data[0].name;
                        self.tabIndex = tabIndex;
                        self.editableTabs = data;
                    }else{

                    }
                }
            });
        },
        methods:{
            handleTabsEdit(targetName, action) {//添加类别
                if (action === 'add') {
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: '新类别',
                    name: newTabName,
                    data:[],
                    cate_sum:''
                });
                this.editableTabsValue = newTabName;
                }
                if (action === 'remove') {
                    this.$confirm('确定要删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(() => {
                            let tabs = this.editableTabs;
                            let activeName = this.editableTabsValue;
                            if (activeName === targetName) {
                                tabs.forEach((tab, index) => {
                                    if (tab.name === targetName) {
                                        let nextTab = tabs[index + 1] || tabs[index - 1];
                                        if (nextTab) {
                                        activeName = nextTab.name;
                                        }
                                    }
                                });
                            }
                            this.editableTabsValue = activeName;
                            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });          
                    });
                }
            },
            addNewLine(data){//添加新列
                console.log(data);
                data.data.push({
                    serial:data.data.length+1,
                    girard:"",
                    img_path:"请在操作选择图片",
                    nums:""
                })
            },
            deleteRow(data,table){//删除行
                table.data.splice(data,1);
                this.checkSum(table);
            },
            replaceRowImg(scope,item){//更换图片
                if(scope.row.girard == ""){
                    this.$notify({
                        title: '警告',
                        message: '请填写款号',
                        type: 'warning'
                    });
                    return false;
                }
                let self = this;
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    url: '/ranking/get-girard-img',
                    type: 'get',
                    data: {
                        girard:scope.row.girard
                    },
                    dataType: 'json',
                    success: function(res) {
                        if(res.result.success){
                            if(res.content.length < 1){
                                self.$notify({
                                    title: '警告',
                                    message: '该款号没有图片',
                                    type: 'warning'
                                });
                                self.chooseImage = false;
                                return false;
                            }
                            self.chooseImage = true;
                            let data = new Array;
                            let resData = res.content;
                            for(let value of resData){
                                    data.push({src:cdn_name+"/bee/girard/"+scope.row.girard+"/"+value})
                            }
                            self.girard_image_list = data;
                            self.setImgNeed = [item.id,scope.$index];
                        }
                    }
                });
            },
            replaceCheck(src){//确认选择更换图片
                let self = this;
                let data = self.editableTabs;
                let tagIndex = self.setImgNeed[0];
                let rowIndex = self.setImgNeed[1];
                self.editableTabs.filter(data => data.id == tagIndex)[0].data[rowIndex].img_path = src;
                this.chooseImage = false
            },
            resetCheck(){//重置页面
                this.$confirm('确定要重置所有信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.editableTabs = [{title: '新类别',name: '1',data:[]}];
                        this.tabIndex = 1;
                        this.girard_image_list = [];
                        this.$message({
                            type: 'success',
                            message: '重置成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消重置'
                        });          
                });
            },
            successCheck(item){//完成
                let cate_id = item.id;
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    url: '/ranking/ranking-data-edit',
                    type: 'post',
                    data: {
                        data:item,
                        cate_id:cate_id
                    },
                    dataType: 'json',
                    success: function(res) {
                        if(res.result.success == true){
                            self.$alert('提交成功', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.$message({
                                    type: 'info',
                                    message: `action: ${ action }`
                                    });
                                }
                            });
                        }else{

                        }
                    }
                });
            },
            checkSum(item){//计算总数
                let sum = 0;
                for(let value of item.data){
                    sum += Number(value.nums)
                }
                item.cate_sum = sum
            },
            goRankList(item){
                console.log(item);
                window.open("https://www.52mylife.cn/ranking/details?cate_id="+item.id);
            }
        },
    })
</script>
@endsection